<script setup lang="ts">
import { useChannelStore } from "@/stores/channel";
import type { AxiosResData, ChannelItem, ChannelResData } from "@/types";
import axios from "axios";
import { onMounted, ref } from "vue";
// 调用通过 Pinia 管理后的函数
const store = useChannelStore();
// 接收父组件数据
// defineProps<{ channelId: number }>();
// 给父组件传值
// defineEmits<{ "update:channelId": [channelId: number] }>();
// 定义数据
const list = ref<ChannelItem[]>([]);
// 获取频道数据
const getData = async () => {
  const res = await axios.get<AxiosResData<ChannelResData>>(
    "http://geek.itheima.net/v1_0/channels"
  );
  console.log(res); //测试工具，查看数据，再鼠标右键，复制属性路径data.data.channels
  // 保存频道数据
  list.value = res.data.data.channels;
};
// 组件挂载完成
onMounted(() => {
  // 获取频道数据
  getData();
});
</script>

<template>
  <div class="channel-nav">
    <nav class="list">
      <!--$emit:相当于：上面的defineEmits函数：const emit = defineEmits<>() 调用时：emit('update:channelId', item.id)  -->
      <a
        class="item"
        :class="{ active: store.channelId === item.id }"
        href="javascript:;"
        v-for="(item, i) in list"
        :key="item.id"
        @click="store.updateChannelId(item.id)"
      >
        {{ item.name }}
      </a>
    </nav>
  </div>
</template>
